<template>
  <div class="container">
    <el-col :span="10" class="border-radius">
      <div class="left">
        <div class="title-text">值班地点</div>
        <list-table-new
          class="table"
          v-bind="tableLeft"
          ref="tableLeftParam"
        ></list-table-new>
      </div>
    </el-col>
    <el-col :span="14" class="border border-radius">
      <div class="right">
        <div class="title-text">配置</div>
        <list-table-new
          v-show="showTable"
          class="table"
          v-bind="tableRight"
          ref="tableRightParam"
        ></list-table-new>
      </div>
    </el-col>
    <dialogPublic
      width="600px"
      :title="title"
      :show.sync="showLeft"
      v-if="showLeft"
      @doSubmit="doSubmitLeft"
      @doClose="() => (showLeft = false)"
    >
      <editForm
        class="form-left"
        :formConfig="leftConfig"
        ref="leftForm"
        :formData="leftFormData"
      ></editForm>
    </dialogPublic>
    <dialogPublic
      :title="title"
      :show.sync="showRight"
      v-if="showRight"
      height="400"
      @doSubmit="doSubmitRight"
      @doClose="() => (showRight = false)"
    >
      <editForm
        :formConfig="rightConfig"
        ref="rightEditForm"
        :formData="rightFormData"
      ></editForm>
    </dialogPublic>
  </div>
</template>

<script>
import {
  addInfoLeft,
  deleteInfoLeft,
  updateInfoLeft,
  queryListLeft,
  addInfoRight,
  deleteInfoRight,
  updateInfoRight,
  queryListRight,
  insertInfoRight,
  deleteRight,
} from "@/api/businessConfigurationManagement/shiftConfiguration.js";
export default {
  data() {
    return {
      showTable: false,
      dockingId: "", // 左侧id
      currentRow: {},
      topRow: {},
      paramsRowSpanArr: [],
      spanIndex: 0,
      title: "", // 弹框标题
      search: {},
      showLeft: false, // 左侧弹框显示
      showRight: false, // 右侧弹框显示
      // 左侧表单
      tableLeft: {
        showFilterBtn: false,
        showCustomBtn: false,
        showPagination: false,
        highlightCurrentRow: true,
        // 搜索框
        searchObj: {
          searchMethod: (params) => {
            this.search = params;
            this.getLeftData(params);
          },
          queryData: {
            page: 1,
            pageSize: 15,
          },
          searchArr: [
            {
              type: "organization",
              label: "值班单位",
              model: "deptName",
              idsStr: "deptId",
              placeholder: "请选择或输入",
            },
          ],
        },
        tableDataObj: {
          tableArr: [],
          total: null,
        },
        // 操作按钮
        actionList: [
          {
            name: "新建",
            icon: "icon-xinjian",
            disabled: !this.$store.getters.isBtnAuth("addLeft"),
            content: "未授权的功能",
            method: () => {
              this.toAddLeft();
            },
          },
        ],
        tableMethods: {
          //点击行的方法
          rowClick: (row) => {
            this.getRightData(row.id);
          },
        },
        // 表头
        column: [
          {
            label: "值班单位",
            prop: "deptName",
          },
          {
            label: "值班地点",
            prop: "locationName",
          },
          {
            label: "值班人员类型",
            prop: "onduty",
            formatter: (row) => {
              let types = this.$store.getters["dirtData"]("onduty");
              let val = row.onduty;
              let obj = types.find((i) => i.value == val);
              return obj ? obj.label : val;
            },
          },
          {
            label: "操作",
            type: "button",
            scopeType: "textButton",
            width: "150px",
            buttonArr: [
              {
                text: "编辑",
                icon: "icon-a-xiugaibianji",
                isShow: (row) => {
                  return true;
                },
                methods: (row) => {
                  this.leftFormData = row;
                  this.leftFormData.deptNameArr = row.deptName;
                  this.title = "编辑";
                  this.showLeft = true;
                },
              },
              {
                text: "删除",
                icon: "icon-shanchu",
                isShow: (row) => {
                  return true;
                },
                methods: (row) => {
                  this.deleteById(row.id, "left");
                },
              },
            ],
          },
        ],
      },
      // 右侧表单
      tableRight: {
        showFilterBtn: false,
        showCustomBtn: false,
        showPagination: false,
        showIndex: true,
        // 搜索框
        searchObj: {
          searchMethod: (params) => {
            this.getRightData(params);
          },
          queryData: {
            page: 1,
            pageSize: 15,
          },
          searchArr: [],
        },
        tableDataObj: {
          tableArr: [],
          total: null,
        },
        // 操作按钮
        actionList: [
          {
            name: "新建",
            icon: "icon-xinjian",
            disabled: !this.$store.getters.isBtnAuth("addRight"),
            content: "未授权的功能",
            method: () => {
              this.toAddRight();
            },
          },
        ],
        tableMethods: {
          //点击行的方法
          rowClick: (row) => {},
        },
        // 表头
        column: [
          {
            label: "一级项",
            prop: "firstLevel",
            required: true,
          },
          {
            label: "二级项",
            prop: "secondLevel",
            required: true,
          },
          {
            label: "默认内容",
            prop: "content",
            required: true,
          },
          {
            label: "是否展示",
            prop: "displayFlag",
            required: true,
            width: "100px",
            formatter: (row) => {
              let types = this.$store.getters["dirtData"]("YesOrNo");
              let val = row.displayFlag;
              let obj = types.find((i) => i.value == val);
              return obj ? obj.label : val;
            },
          },
          {
            label: "操作",
            type: "button",
            scopeType: "textButton",
            width: "220px",
            buttonArr: [
              {
                text: "编辑",
                icon: "icon-a-xiugaibianji",
                isShow: (row) => {
                  return true;
                },
                methods: (row) => {
                  this.changData(row.id);
                },
              },
              {
                text: "向上插入",
                icon: "icon-shangyi",
                isShow: (row) => {
                  return true;
                },
                methods: (row, index) => {
                  this.insert(row, index);
                },
              },
              {
                text: "删除",
                icon: "icon-shanchu",
                isShow: (row) => {
                  return true;
                },
                methods: (row) => {
                  this.deleteById(row.id, "right");
                },
              },
            ],
          },
        ],
        tableData: [],
        // 合并表格
        arraySpanMethod: ({ row, column, rowIndex, columnIndex }) => {
          if (columnIndex == 1) {
            return {
              rowspan: this.paramsRowSpanArr[rowIndex],
              colspan: 1,
            };
          }
        },
      },
      // 左侧弹框表单
      leftConfig: {
        labelWidth: "120px",
        itemArr: [
          {
            label: "值班单位",
            prop: "deptName", //多选时，字段要为数组类型
            propArr: "deptNameArr",
            idsStr: "deptId",
            multiple: false, //是否多选
            type: "dept-select", //类型
            trigger: "change",
            required: true,
            span: 24,
          },
          {
            label: "值班地点",
            prop: "locationName",
            idsStr: "location",
            type: "location",
            trigger: "change",
            required: true,
            span: 24,
          },
          {
            label: "值班人员类型",
            prop: "onduty",
            type: "select",
            required: true,
            span: 24,
            selectOption: this.$store.getters["dirtData"]("onduty"),
          },
        ],
      },
      // 右侧弹框表单
      rightConfig: {
        labelWidth: "120px",
        itemArr: [
          {
            label: "一级项",
            prop: "firstLevel",
            type: "text",
            span: 24,
            required: true,
            disabled: false,
          },
          {
            label: "二级项",
            prop: "secondLevel",
            type: "text",
            span: 24,
            required: true,
            disabled: false,
          },
          {
            label: "默认内容",
            prop: "content",
            type: "textarea",
            span: 24,
            rows: 4,
            required: true,
            disabled: false,
          },
          {
            label: "是否展示",
            prop: "displayFlag",
            type: "radio",
            span: 24,
            radioOption: [
              { label: "是", value: 1 },
              { label: "否", value: 0 },
            ],
            required: true,
            disabled: false,
          },
        ],
      },
      // 左侧弹框数据
      leftFormData: {},
      // 右侧弹框数据
      rightFormData: {},
    };
  },
  created() {
    this.init();
  },
  methods: {
    // 初始化信息
    init() {
      let deptId = "";
      let deptName = "";
      if (this.$store.state.user.userInfo.orgId) {
        deptId = this.$store.state.user.userInfo.orgId;
        deptName = this.$store.state.user.userInfo.orgName;
      } else {
        deptId = this.$store.state.user.userInfo.deptId;
        deptName = this.$store.state.user.userInfo.deptName;
      }
      let data = { deptId, deptName };
      this.tableLeft.searchObj.queryData = data;
      this.tableLeft.searchObj.searchMethod(data);
    },
    // 左侧新增配置项
    toAddLeft() {
      this.leftFormData = {};
      this.title = "新建";
      this.showLeft = true;
    },
    // 左侧弹框表单提交-新增或修改
    async doSubmitLeft() {
      let actionApi = (params) => {
        return this.title == "新建"
          ? addInfoLeft(params)
          : updateInfoLeft(params);
      };
      let data = await this.$refs.leftForm.getFormData();
      await actionApi(data).then((res) => {
        if (res.code == 200) {
          this.showLeft = false;
          // this.$message.success(res.description);
          this.$message.success("保存成功！");
          this.tableLeft.searchObj.queryData = this.search;
          this.tableLeft.searchObj.searchMethod(
            this.tableLeft.searchObj.queryData
          );
        }
      });
    },
    // 查询左侧表格数据
    async getLeftData(params) {
      let queryData = Object.assign({}, params);
      delete queryData.page;
      delete queryData.pageSize;
      let { data } = await queryListLeft(queryData);
      this.$set(this.tableLeft, "tableData", data.length ? data : []);
      data.length ? this.tableLeft.tableMethods.rowClick(data[0]) : "";
    },
    // 右侧新增配置项
    toAddRight() {
      this.rightConfig.itemArr[0].disabled = false;
      this.rightFormData = { displayFlag: 1 };
      this.title = "新增配置项";
      this.showRight = true;
    },
    // 右侧弹框表单提交-新增或修改
    async doSubmitRight() {
      try {
        let formData = await this.$refs.rightEditForm.getFormData();
        formData.dockingId = this.dockingId;
        let res;
        if (this.title == "插入配置项") {
          if (this.allowInsert(formData)) {
            formData.sort = this.currentRow.sort;
            res = await insertInfoRight(formData);
          } else {
            this.$alert("存在相同的一级项，请插入正确的位置", "", {
              confirmButtonText: "确定",
              center: true,
            });
          }
        } else {
          res = await addInfoRight(formData);
        }
        this.$message.success(res.description);
        this.getRightData(this.dockingId);
        this.showRight = false;
      } catch (error) {
        this.$alert("存在相同的一级项，请插入正确的位置", "", {
          confirmButtonText: "确定",
          center: true,
        });
      }
    },
    // 右侧向上插入
    insert(row, index) {
      this.rightConfig.itemArr[0].disabled = false;
      this.currentRow = row;
      let form = {
        displayFlag: 1,
      };
      this.topRow = this.tableRight.tableData[index - 1];
      if (index != 0) {
        if (this.topRow.firstLevel == this.currentRow.firstLevel) {
          form.firstLevel = this.topRow.firstLevel;
          this.rightConfig.itemArr[0].disabled = true;
        }
      }
      this.rightFormData = form;
      this.title = "插入配置项";
      this.showRight = true;
    },
    //是否允许插入
    allowInsert(formData) {
      let data = this.tableRight.tableData.filter((item) => {
        return formData.firstLevel == item.firstLevel;
      });
      if (data.length > 0) {
        let res = data.every((item) => {
          return (
            item.firstLevel != this.currentRow.firstLevel &&
            item.firstLevel != this.topRow.firstLevel
          );
        });
        if (res) {
          return false;
        } else {
          return true;
        }
      } else {
        return true;
      }
    },
    // 查询右侧表格数据
    async getRightData(id) {
      this.$refs.tableRightParam.adjustSize();
      this.showTable = true;
      this.dockingId = id;
      let { data } = await queryListRight(id);
      this.$set(this.tableRight, "tableData", data || []);
      this.getParamsRowSpan();
    },
    // 编辑右侧表格数据
    async changData(id) {
      let { data } = await updateInfoRight(id);
      this.rightFormData = data;
      this.rightFormData.displayFlag = data.displayFlag ? 1 : 0;
      this.title = "编辑";
      this.showRight = true;
    },
    // 根据id删除信息
    async deleteById(id, type) {
      let actionApi = (params) => {
        return type == "left"
          ? deleteInfoLeft(params)
          : deleteInfoRight(params);
      };
      this.$confirm("确定要删除这条数据吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        actionApi({ id }).then((res) => {
          if (res.code == 200) {
            // this.$message.success(res.description);
            this.$message.success("删除成功！");
            if (type == "left") {
              deleteRight(id);
              this.showRight = false;
              this.tableLeft.searchObj.queryData = this.search;
              this.tableLeft.searchObj.searchMethod(this.search);
            } else {
              this.getRightData(this.dockingId);
            }
          }
        });
      });
    },
    //数据记录项的合并规则
    getParamsRowSpan() {
      this.paramsRowSpanArr = [];
      this.tableRight.tableData.forEach((item, index) => {
        if (index == 0) {
          this.paramsRowSpanArr.push(1);
          this.spanIndex = 0;
        } else {
          if (
            item.firstLevel == this.tableRight.tableData[index - 1].firstLevel
          ) {
            this.paramsRowSpanArr[this.spanIndex] += 1; //项目名称相同，合并到同一个数组中
            this.paramsRowSpanArr.push(0);
          } else {
            this.paramsRowSpanArr.push(1);
            this.spanIndex = index;
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: #f2f3f8;
  .border-radius {
    height: 100%;
  }
  .border {
    border-left: 15px #f2f3f8 solid;
  }
  .left {
    background: #fff;
    width: 100%;
    height: 100%;
    padding: 20px;
    border-radius: 8px;
    /deep/ .table-search--action {
      height: 0;
    }
    /deep/ .list-table-header .el-tooltip,
    .el-button--plain {
      position: relative;
      top: -64px;
    }
    /deep/ .list-table-main {
      position: relative;
      top: -22px;
    }
  }
  .right {
    background: #fff;
    width: 100%;
    height: 100%;
    padding: 20px;
    border-radius: 8px;
  }
  .form-left {
    width: 460px;
    margin: 0 auto;
    padding: 25px 0;
  }
  .form-right {
    width: 600px;
    margin: 0 auto;
    padding: 25px 0;
  }
  /deep/ .header--btnNoOver {
    border: none;
  }
  .title-text {
    //margin: 20px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    text-align: left;
    color: #303133;
  }
}
</style>